<template>
  <div class="material-main">
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="search.title" size="small" placeholder="标题模糊查询" />
        </el-col>
        <el-col :span="6" :offset="12">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
          <el-button type="default" size="small" @click="doResetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="content">
      <el-card class="card">
        <div slot="header">
          <el-upload class="btn-upload" action="/admin/xy/upload/uploadImg" :on-success="handleSucee">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <MyPagination :page="page" />
        <el-row :gutter="30">
          <el-col v-for="m in imgList" :key="m.id" class="img-block" :span="6">
            <el-card shadow="hover">
              <el-image
                style="width: 90%; height: 300px"
                :src="Url.host+'/'+m.dir+'/'+m.fileName"
                fit="contain"
                @click="showBig(Url.host+'/'+m.dir+'/'+m.fileName)"
              />
              <div v-show="m.id != editId" class="tool-bar">
                <el-tooltip class="item" effect="dark" content="点击编辑" placement="top">
                  <span
                    class="title"
                    :class="{unnamed:!m.title}"
                    @click="goEdit(m.id,$event)"
                  >{{ m.title?m.title:'未定义' }}</span>
                </el-tooltip>
                <span class="size">{{ m.size+'b' }}</span>
                <el-button
                  type="text"
                  style="color:#F56C6C"
                  size="mini"
                  icon="el-icon-delete"
                  @click="delImg(m.id)"
                >删除</el-button>
              </div>
              <el-input
                v-show="m.id == editId"
                v-model="m.title"
                size="small"
                placeholder="输入标题,enter保存,esc取消"
                @keyup.esc.native="cancleSave"
                @keyup.enter.native="updateTitle(m.id,m.title)"
              />
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-dialog :visible.sync="dialog" width="50%" @close="closeDialog">
      <img v-if="showImg" style="max-width: 100%;" :src="showImg" alt>
    </el-dialog>
  </div>
</template>

<script>
import materialApi from '@/api/content/material'
import MyPagination from '@/components/common/Pagination'
import pageMixin from '@/mixins/pageMixin'
import Url from '@/api/config'
import _ from 'lodash'
import { resetData } from '@/utils/index'
export default {
  name: 'Material',
  components: {
    MyPagination
  },
  directives: {
    focus: {
      inserted: function(el) {
        console.log(el)
        // 聚焦元素
        el.focus()
      }
    }
  },
  mixins: [pageMixin],
  data() {
    return {
      Url,
      dialog: false,
      search: {},
      imgList: [],
      editId: '', // 标识哪个被编辑
      page: {
        limit: 12,
        sizes: [12, 24, 356]
      },
      showImg: ''
    }
  },
  created() {
    this.getImgList()
  },
  methods: {
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      }
      params = _.pickBy(params, item => item)
      console.log(this.search)
      console.log(params)

      materialApi.getImgList(params).then(({ data }) => {
        this.imgList = data.list
        this.page.start = data.pageNumber
        this.page.limit = data.pageSize
        this.page.total = data.totalRow
      })
    },
    handleSucee() {
      // 成功后刷新列表
      this.getImgList()
    },
    doSearch() {
      resetData(this, 'page')
      this.getImgList()
    },
    doResetSearch() {
      resetData(this, 'search')
      this.getImgList()
    },
    delImg(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          materialApi
            .delImg({
              id
            })
            .then(res => {
              if (res.code) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getImgList()
              } else {
                this.$message.error('删除失败!')
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    goEdit(id, e) {
      this.editId = id
      this.$nextTick(() => {
        // 获取目标元素
        var target = e.target
        var inputEl = target.parentNode.nextElementSibling.children[0]
        inputEl.focus()
        console.log(inputEl)
      })
    },
    cancleSave() {
      this.editId = ''
    },
    updateTitle(id, title) {
      materialApi
        .updateTitle({
          id,
          title
        })
        .then(res => {
          if (res.code) {
            this.$message.success('更新成功')
            this.editId = ''
            this.getImgList()
          } else {
            this.$message.error('更新失败!')
          }
        })
    },
    showBig(img) {
      this.dialog = true
      this.showImg = img
    },
    closeDialog() {
      this.dialog = false
      this.showImg = ''
    }
  }
}
</script>

<style lang='scss' scoped>
.material-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
    ::v-deep .el-card__body {
      text-align: center;
    }
  }
  .content {
    .img-block {
      margin: 20px auto;
      height: 400px;
      .tool-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .title {
          font-size: 14px;
          color: #333;
          &.unnamed {
            color: #909399;
          }
        }
        .size {
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
}
</style>
